<template>
    <div>
        <h2>修改</h2>
       <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>上传图片</td>
                    <td><input type="file" @change="img">
                        <img :src="info.img" width="100px" height="50px" v-if="info.img!=''">
                    </td>
                </tr>

                 <tr>
                    <td>信息</td>
                    <td><input type="text" v-model="info.name"></td>
                </tr>
           

                  <tr>
                    <td>分类</td>
                    <td><select v-model="info.lid">
            <option value="-1">请选择</option>
            <option v-for="item in obj" :value="item.id">{{ item.pname }}</option>
        </select></td>
                </tr>

                  <tr>
                    <td>时间</td>
                    <td><input type="date"  v-model="info.date"></td>
                </tr>

                  <tr>
                    <td>地点</td>
                    <td><input type="text" v-model="info.address"></td>
                </tr>

                  <tr>
                    <td>更新人</td>
                    <td><input type="text" v-model="info.people"></td>
                </tr>

                  <tr>
                    <td>最后更新时间</td>
                    <td><input type="date" v-model="info.edate"></td>
                </tr>

                  <tr>
                    <td></td>
                    <td><input type="button" value="修改" @click="upd"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import  { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();

let info:any=reactive({
     "id": route.query.id,
  "img": "",
  "name": "",
  "state": true,
  "lid": '-1',
  "date": "",
  "address": "",
  "people": "",
  "edate": ""
})

onMounted(()=>{
    Bind();
    find();
})

let obj:any=ref([]);
const Bind=()=>{
    axios({
        url:'https://localhost:7296/api/Pens/Bind',
        method:'get',
    })
    .then((res)=>{
        obj.value=res.data;
    })
    .catch((err)=>{
        console.log(err)
    })
}

const find=()=>{
    
    axios({
        url:'https://localhost:7296/api/Pens/Find',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then((res)=>{
        info=res.data;
    })
}
const img=(e:any)=>{
let obj=e.target.files[0];
let f=new FormData();
f.append('file',obj);
axios({
url:'https://localhost:7296/api/Pens/Img',
method:'post',
data:f
})
.then((res)=>{
    info.img=res.data;
})
}

const upd=()=>{
    axios({
        url:'https://localhost:7296/api/Pens/Upd',
        method:'put',
        data:info
    })
    .then((res)=>{
        if(res.data>0){
            alert('修改成功');
            router.push("/show")
        }
        else{
            alert('修改失败');
            return;
        }
    })
}
</script>

<style scoped>

</style>